<template>
  <div class="steps" :style="steps_style">
    <step 
    @changefocus="changefocus" 
    @changeview="changeview" 
    @Addstep="add" 
    @Delstep="del" 
    @revisedata="revisedata" 
    v-for="(msg,index) in msgs" 
    :key="index" 
    :msg="msg" 
    :index="index" 
    :index_max="index_max"
    :focusindex="focusindex" 
    :is_edit="is_edit"
    :viewindex="viewindex"
    />
    </step>
  </div>
</template>

<script>
import Step from "./Step.vue"

export default {
  name: 'steps',
  props: {
    p_card_w: Number,
    p_card_h: Number
  },
  data () {
    return {
      msgs:[  //存储步骤的信息，后期可换到数据库源
        "Initialization",
        "test",
        "test",
        "test",
        "test",
        "test",
        "test",
        "test",
        "test",
        "test",
        "test",
        "test",
        "test",
        "test",
        "test",
        "End"
      ],
      index_max: 1,//标志数组下表最大值，mount时与msgs动态绑定
      focusindex: 2,//当前聚焦的步骤序号
      viewindex: 0,//非编辑模式下的查看步骤
      is_edit: 1//是否可编辑用于区分两个系统
    }
  },
  methods: {
    add:function(index,text){    //添加一个步骤
      this.index_max+=1;
      var site=index+1;
      this.msgs.splice(site,0,text);
      this.ac+=1;
      this.focusindex=index+1;
    },
    del:function(index){    //删除一个步骤
      var site = index;
      if(index!=this.index_max && index!=0){
        this.msgs.splice(site,1);
        this.index_max-=1;
        this.focusindex=index;
      }
    },
    revisedata:function(reverseindex,thetext){
      this.msgs.splice(reverseindex,1);
      this.msgs.splice(reverseindex,0,thetext);
    },
    changefocus:function(index){    //编辑模式时根据聚焦index根据Step传来的index修改聚焦
    //这个地方可以改绑定数据源
      this.focusindex=index;
    },
    changeview:function(index){    //非编辑模式时视图index根据Step传来的index修改聚焦
    //这个地方可以改绑定数据源
      this.viewindex=index;
    }
  },
  components:{
    "step":Step,
  },
  computed:{
    steps_style() {
      return {
        width: this.p_card_w - 40 + 'px',
        postion: 'absolute',
        height: this.p_card_h - 40 + 'px'
      };
    }
  },
  mounted: function(){
    this.index_max=this.msgs.length-1;
  },
  watch: {
    p_card_w(newVal) {
      // console.log(newVal)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.steps {
  height: 650px;
  overflow-y: hidden;
  position: absolute;
}
.steps:hover {
  overflow-y: overlay;
}
/*滚动条样式*/
.steps::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 3px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
  border-radius: 10px;
  margin-top: 5px;
}
.steps::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.08);
}
.steps::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.05);
}
</style>
